<template>
	<view class="index_box">
		<view class="index_top z-padding-b-24">
			<view class="index_top_location z-margin-lr-32" :style="'padding-top:' + safeTop" @click="selectAddress">
				<image class="location_img" src="../../static/index/location.png" mode="" />
				<view class="location_text z-margin-l-16 z-margin-r-8 z-font-32">{{ address.name }}</view>
				<image src="/static/index/more.png" class="more"></image>
			</view>
		</view>

		<view class="index_bottom">
			<scroll-view class="index_main" scroll-y="true">
				<!-- 搜索 -->
				<view class="search_box z-radius-40 z-margin-lr-32 z-padding-lr-24" @click="search">
					<image class="search_img" src="../../static/index/search.png" mode="" />
					<view class="search_word z-font-24 text_999 z-margin-l-24">搜索上门服务</view>
				</view>

				<!-- 轮播图 -->
				<swiper class="swiper_box" autoplay="true">
					<swiper-item v-for="item in thumb" class="swiper_img">
						<image class="swiper_img" :src="cdn(item.image)" mode="aspectFill" @click="swiperTap" />
					</swiper-item>
				</swiper>

				<!-- 公告 -->
				<view class="z-flex z-padding-lr-24 z-radius-16 notice-box" v-if="config.user_notice">
					<image class="notice-img" src="../../static/index/indexnotice.png"></image>
					<u-notice-bar icon="" class="z-flex-1" color="#6B738B" bgColor="#fff" :text="config.user_notice"></u-notice-bar>
				</view>

				<view class="index_content">
					<!-- 导航 -->
					<view class="ten_btn z-radius-20">
						<view class="ten_btn_box z-radius-20 z-padding-t-16">
							<view class="ten_btn_item z-padding-tb-24 z-flex-y-c" @click="cateList(item)" v-for="(item, index) in cate">
								<image :src="cdn(item.image)" class="ten_btn_img" mode="aspectFill" />
								<view class="z-font-24">{{ item.label }}</view>
							</view>
						</view>
						<view class="ten_btn_bottom z-padding-24">
							<view class="ten_btn_bottom_item">
								<image src="../../static/index/one.png" class="ten_btn_bottom_img" mode="" />
								<view class="z-font-22 z-padding-l-8">全场保障</view>
							</view>
							<view class="ten_btn_bottom_item">
								<image src="../../static/index/two.png" class="ten_btn_bottom_img" mode="" />
								<view class="z-font-22 z-padding-l-8">7×24小时服务</view>
							</view>
							<view class="ten_btn_bottom_item">
								<image src="../../static/index/three.png" class="ten_btn_bottom_img" mode="" />
								<view class="z-font-22 z-padding-l-8">不满意重做</view>
							</view>
							<view class="ten_btn_bottom_item">
								<image src="../../static/index/four.png" class="ten_btn_bottom_img" mode="" />
								<view class="z-font-22 z-padding-l-8">迟到必赔</view>
							</view>
						</view>
					</view>

					<!-- 附近服务者 -->
					<view class="index_samebox" v-if="nearSkill.length > 0">
						<view class="index_samebox_top z-margin-tb-30">
							<view class="z-font-26 z-font-w">附近服务者</view>
							<view class="z-font-24 text_999 z-flex" @click="toSkill">
								更多
								<!-- <van-icon name="arrow" /> -->
								<u-icon name="arrow-right" size="10"></u-icon>
							</view>
						</view>
					</view>

					<scroll-view scroll-x="true" :show-scrollbar="false" enhanced="true">
						<view class="scrollx">
							<view class="scrollx_item z-flex-y-c z-radius-20" v-for="(item, index) in nearSkill" @click="skillTap(item.id)">
								<image class="scrollx_item_img z-padding-16" :src="cdn(item.image)" mode="aspectFill" lazy-load lazy-load-margin="0" />
								<view>{{ item.name }}</view>
								<view class="scrollx_item_tips z-font-22 z-flex z-radius-4 z-padding-lr-8 z-margin-b-24 z-margin-t-8">
									{{ item.skillCate }}
								</view>
							</view>
						</view>
					</scroll-view>

					<block v-for="(item,index) in cateGoods">
						<view class="zxcpage" v-if="item.goodsList.length > 0">
							<view class="index_samebox">
								<view class="index_samebox_top z-margin-tb-30">
									<view class="z-font-26 z-font-w">{{ item.name }}</view>
									<view class="z-font-24 text_999 z-flex" @click="cateList(item)">
										更多
										<!-- <van-icon name="arrow" /> -->
										<u-icon name="arrow-right" size="10"></u-icon>
									</view>
								</view>
							</view>
							<view class="fourbox z-margin-lr-32">
								<block v-for="(val,i) in item.goodsList">
									<service :info="val" :type="1" @serviceTap="serviceTap"></service>
								</block>
							</view>
						</view>
					</block>
				</view>
			</scroll-view>
		</view>
		<image src="../../static/service/center.png" class="center" @tap="center"></image>
	</view>
</template>

<script>
import http from '../../utils/http';
import service from "@/component/service.vue"
export default {
	components:{
		service
	},
	data() {
		return {
			config: uni.getStorageSync('config'),
			address: uni.getStorageSync('address'),
			thumb: '',
			cate: '',
			nearSkill: [],
			cateGoods: [],
			// #ifdef MP-WEIXIN
				safeTop:uni.getStorageSync('safeTop')
			// #endif
		};
	},
	onLoad() {
		this.getInfo();
		this.getCityInfo();
	},
	methods: {
		selectAddress(){
		    this.util.skip('/service/selectAddress/selectAddress?city='+this.address.city+'&name='+this.address.name)
		},
		//领券
		center() {
		    this.util.authSkip('/service/couponscenter/couponscenter')
		},
		getInfo() {
			http.post('thumb/getlist', '', true).then((res) => {
				this.thumb = res.data;
			});

			http.post('category/getlist', '', true).then((res) => {
				this.cate = res.data;
			});
		},
		getCityInfo() {
			http.get(
				'skill/nearskill',
				{
					city: this.address.city,
					lat: this.address.lat,
					lng: this.address.lng,
					page: 1
				},
				false
			).then((res) => {
				this.nearSkill = res.data;
			});

			http.post('goods/categorygoods', { city: this.address.city }, false).then((res) => {
				this.cateGoods = res.data;
			});
		},
		swiperTap(e) {
			let item = e.currentTarget.dataset.item;
			if (item.type == 1) {
				util.skip('/service/servedetail/servedetail?id=' + item.goods_id);
			} else if (item.type == 2) {
				util.skip('/service/info/info?id=' + item.config_text_id);
			} else if (item.type == 3) {
				util.skip(item.jump);
			}
		},
		//金刚区跳转
		cateList(e){
			console.log(e,1212)
		    let name = e.label ? e.label : e.name
		    this.util.skip('/service/catelist/catelist?category_id='+e.id+'&name='+name)
		},
		serviceTap(e){
			console.log(e)
		    this.util.skip('/service/servedetail/servedetail?id='+e.id)
		},
		search() {
			this.util.skip('/service/searchdetail/searchdetail?type=1');
		},
		//跳转服务者详情
		skillTap(e){
		    this.util.skip('/service/skilldetail/skilldetail?skill_id='+e)
		},
		toSkill() {
			uni.switchTab({
				url: '/pages/servers/servers'
			});
		}
	}
};
</script>

<style>
.index_box {
	box-sizing: border-box;

	background: linear-gradient(180deg, #62cb81 0%, #e3fdce 56%, rgba(227, 253, 206, 0) 100%) no-repeat;
	background-size: 750rpx 500rpx;
	background-color: #edf1f4;
	height: 100vh;
	/* #ifdef H5 */
	height: calc(100vh - 90rpx);
	/* #endif */
	display: flex;
	flex-direction: column;
}

.index_top {
	width: 100vw;
	box-sizing: border-box;
}

.index_top_location {
	display: flex;
	align-items: center;
}

.index_top_location_titile {
	width: 158rpx;
	height: 37rpx;
}

.location_img {
	width: 24rpx;
	height: 24rpx;
}

.location_text {
	color: #fff;
}
.more {
	width: 24rpx;
	height: 24rpx;
}

.index_bottom {
	flex: 1;
	overflow: hidden;
}
.index_main {
	height: 100%;
}

.index_content {
	background-color: #edf1f4;
	margin-top: 20rpx;
}

.search_box {
	display: flex;
	align-items: center;
	background: #fff;
	width: 686rpx;
	height: 80rpx;
	box-sizing: border-box;
}

.search_img {
	width: 24rpx;
	height: 24rpx;
}

.input_box {
	width: 90%;
	color: #999;
}
.swiper_box {
	width: 686rpx;
	margin: 0 auto;
	height: 300rpx;
	border-radius: 20rpx;
	margin-top: 20rpx;
	overflow: hidden;
}

.swiper_img {
	width: 100%;
	height: 100%;
}
.notice-box {
	width: 638rpx;
	margin: 20rpx auto 0;
	background-color: #fff;
}

.notice-img {
	width: 32rpx;
	height: 32rpx;
	vertical-align: middle;
}

.ten_btn {
	width: 686rpx;
	margin: 0 auto;
	background: #ffffff linear-gradient(90deg, #f0fff3 0%, #edfdde 100%);
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
}

.ten_btn_box {
	background-color: #fff;
	width: 686rpx;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.ten_btn_item {
	width: 20%;
}

.ten_btn_img {
	width: 72rpx;
	height: 72rpx;
}

.ten_btn_bottom {
	width: 686rpx;
	margin: 0 auto;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
}

.ten_btn_bottom_item {
	display: flex;
	align-items: center;
}

.ten_btn_bottom_img {
	width: 20rpx;
	height: 20rpx;
}

.index_samebox {
	width: 686rpx;
	margin: 0 auto;
}

.index_samebox_top {
	display: flex;
	justify-content: space-between;
}

.scrollx {
	display: flex;
	padding: 0 20rpx;
}

.scrollx_item {
	background-color: #fff;
	box-sizing: border-box;
	margin: 0 12rpx;
}

.scrollx_item_img {
	width: 181rpx;
	height: 181rpx;
}

.scrollx_item_tips {
	background: #f0faf3;
	height: 38rpx;
	color: #62cb81;
}

.zxcpage {
	background-color: #edf1f4;
	width: 100vw;
}

.fourbox {
	display: flex;
	flex-wrap: wrap;
	box-sizing: border-box;
	justify-content: space-between;
}

.center {
	position: fixed;
	right: 10rpx;
	bottom: 200rpx;
	width: 66rpx;
	height: 74rpx;
}
</style>
